<!DOCTYPE html>  
<html>  
<head>  
  
        <meta charset="utf-8" />  
  
        <title>Demo Chat</title>  
  
        <link href="bootstrap.css" rel="stylesheet">  
  
    <style>  
        body {  
            padding:20px;  
        }  
        #console {  
            height: 400px;  
            overflow: auto;  
        }  
        .username-msg {color:orange;}  
        .connect-msg {color:green;}  
        .disconnect-msg {color:red;}  
        .send-msg {color:#888}  
    </style>  
  
  
    <script src="js/socket.io/socket.io.js"></script>  
        <script src="js/moment.min.js"></script>  
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
  
    <script>  
  
        var clientid = 'd705dcb9-25ba-11e8-a09a-704d7b7036d3';  
        var targetClientId= 'b63aa406-25ba-11e8-a09a-704d7b7036d3';  
          
        var socket =  io.connect('http://127.0.0.1:8668?id=d705dcb9-25ba-11e8-a09a-704d7b7036d3&pd=e0c53d15-7001-4ea3-b45c-0c1bd0fc75d6&clientid='+clientid);  
  
        socket.on('connect', function() {  
            output('<span class="connect-msg">Client has connected to the server!</span>');  
        });  
  
        socket.on('messageEvent', function(data) {  
            output('<span class="username-msg">' + data.sourceClientId + ':</span> ' + data.msgContent);  
        });  
  
        socket.on('disconnect', function() {  
            output('<span class="disconnect-msg">The client has disconnected!</span>');  
        });  
  
                function sendDisconnect() {  
                        socket.disconnect();  
                }  
  
        function sendMessage() {  
                        var message = $('#msg').val();  
                        $('#msg').val('');  
  
                        var jsonObject = {sourceClientId: clientid,  
                                          targetClientId: targetClientId,  
                                          msgType: '聊天消息',  
                                          msgContent: message};  
                        socket.emit('messageEvent', jsonObject);  
        }  
  
        function output(message) {  
                        var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";  
                        var element = $("<div>" + currentTime + " " + message + "</div>");  
            $('#console').prepend(element);  
        }  
  
        $(document).keydown(function(e){  
            if(e.keyCode == 13) {  
                $('#send').click();  
            }  
        });  
    </script>  
</head>  
  
<body>  
  
    <h1>Netty-socketio Demo Chat</h1>  
  
    <br/>  
  
    <div id="console" class="well">  
    </div>  
  
        <form class="well form-inline" onsubmit="return false;">  
           <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>  
           <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>  
           <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>  
        </form>  
  
  
  
</body>  
  
</html> 